<template>
  <div class='container'>
    <!-- 顶部搜索框 -->
    <questionsSearchVue/>
    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
      <el-tab-pane label="全部" name="first"></el-tab-pane>
      <el-tab-pane label="待审核" name="second"></el-tab-pane>
      <el-tab-pane label="已审核" name="third"></el-tab-pane>
      <el-tab-pane label="已解决" name="fourth"></el-tab-pane>
    </el-tabs>
      <el-alert type="info" :closable="false">
    <div><i class="el-icon-info"></i> 数据一共{{counts}} 条</div>
  </el-alert>
    <!-- 列表 -->
    <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
        prop="number"
        label="试题编号"
        width="120">
      </el-table-column>
      <el-table-column
        prop="subject"
        label="学科"
        width="100">
      </el-table-column>
      <el-table-column
        prop="catalog"
        label="目录" width="120px">
      </el-table-column>
      <el-table-column
        prop="questionType"
        label="题型" width="120px">
        <template v-slot="{row}">
          <span v-if="row.questionType==='1'">单选</span>
          <span v-else-if="row.questionType==='2'">多选</span>
          <span v-else-if="row.questionType==='3'">简答</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="question"
        label="题干"
        width="200px">
        <template v-slot="{row}">
          <div v-html="row.question"></div>
        </template>
      </el-table-column>
      <el-table-column
        prop="addDate"
        label="录入时间"
        width="180px"
        >
        <template v-slot="{row}">
          {{DataStringToDate(row.addDate)}}
        </template>
      </el-table-column>
      <el-table-column
        prop="difficulty"
        label="难度">
        <template v-slot="{row}">
          <span v-if="row.difficulty==='1'">简单</span>
          <span v-else-if="row.difficulty==='2'">一般</span>
          <span v-else-if="row.difficulty==='3'">困难</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="creator" width="120px"
        label="录入人">
      </el-table-column>
      <el-table-column
        prop="chkState" width="120px"
        label="审核状态">
        <template v-slot="{row}">
          <span v-if="row.chkState===0">待审核</span>
          <span v-else-if="row.chkState===1">已审核</span>
          <span v-else-if="row.chkState===2">拒绝</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="chkRemarks" width="200px"
        label="审核意见">
      </el-table-column>
      <el-table-column
        prop="chkUser" width="120px"
        label="审核人">
      </el-table-column>
      <el-table-column
        prop="publishState" width="120px"
        label="发布状态">
        <template v-slot="{row}">
          <span v-if="row.chkState===2">待发布</span>
          <span v-else>{{row.publishState===0?"已下架":"已发布"}}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="address"
         fixed="right"
        label="操作"
        width="200">
        <template v-slot="{row}">
            <el-button  @click="view(row)" size="mini" type="text"  >预览</el-button>
            <el-button  @click="audit(row)" size="mini" type="text" :disabled="chkState(row.chkState)" >审核</el-button>
            <el-button  @click="Edit(row)" size="mini" type="text" :disabled="chkState(row.publishState)">修改</el-button>
            <el-button  @click="Choice(row)" size="mini" type="text"  >{{chkState(row.publishState)?"上架":"下架"}}</el-button>
            <el-button  @click="Delete(row)" size="mini" type="text" :disabled="chkState(row.publishState)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
     <el-pagination
     style="float: right;margin-top: 20px;"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :page-size="pageform.pagesize"
      :page-sizes="[5,10,20,30]"
      layout="prev, pager, next, sizes,jumper"
      :total="counts">
    </el-pagination>
    <!-- 预览弹窗 -->
    <questionsPreviewVue :id="id" v-if="dialogVisible" :dialogVisible.sync="dialogVisible"/>
    <!-- 审核弹窗 -->
    <questionsCheckVue @CheckOk="GetquestionsList(pageform)" v-if="AuditdialogVisible" :id="id" :AuditdialogVisible.sync="AuditdialogVisible"/>
  </div>
</template>

<script>
import { choice, choicePublish, remove } from '../../api/hmmm/questions'
import questionsSearchVue from '../components/questions-search.vue'
import questionsPreviewVue from '../components/questions-preview.vue'

import { EventBus } from '../../../src/EventBus'
import questionsCheckVue from '../components/questions-check.vue'

export default {
  // name: questionsSearchVue,
  components: {
    questionsSearchVue,
    questionsPreviewVue,
    questionsCheckVue
  },
  data () {
    return {
      AuditdialogVisible: false,
      activeName: 'first',
      tableData: [],
      counts: 0,
      pageform: {
        page: 1,
        pagesize: 5
      },
      dialogVisible: false,
      id: null
    }
  },
  created () {
    this.GetquestionsList(this.pageform)
  },
  mounted () {
    const that = this
    EventBus.$on('my-event', (data) => {
      console.log(data) // 'hello world'
      this.pageform = ({ ...data })
      that.GetquestionsList(this.pageform)
    })
  },
  methods: {
    // 切换审核
    async handleClick (tab, event) {
      console.log(tab.index)
      delete this.pageform.chkState
      if (tab.index === '0') return this.GetquestionsList(this.pageform)
      this.pageform.chkState = tab.index - 1
      await this.GetquestionsList(this.pageform)
    },
    // 审核状态
    chkState (a) {
      return a !== 0
    },
    // 审核框
    audit (row) {
      this.AuditdialogVisible = true
      this.id = row.id
    },
    // 列表数据
    async GetquestionsList (pageform) {
      const { data } = await choice(pageform)
      this.counts = data.counts
      this.tableData = data.items
      console.log(data)
    },
    // 时间转换
    DataStringToDate (data) {
      const dateString = data
      const date = new Date(dateString)
      const formattedDate = `${date.getFullYear()}-${padZero(date.getMonth() + 1)}-${padZero(date.getDate())} ${padZero(date.getHours())}:${padZero(date.getMinutes())}:${padZero(date.getSeconds())}`
      function padZero (num) {
        return num.toString().padStart(2, '0')
      }
      // console.log(formattedDate)
      return formattedDate
    },
    // 当前页码改变页面数据
    handleCurrentChange (e) {
      console.log(e)
      this.pageform.page = e
      this.GetquestionsList(this.pageform)
    },
    // 页面数量改变
    handleSizeChange (e) {
      console.log(e)
      this.pageform.pagesize = e
      this.GetquestionsList(this.pageform)
    },
    // 预览
    view (row) {
      console.log(row.id)
      this.id = row.id
      this.dialogVisible = true
    },
    // 删除
    Delete (row) {
      console.log(row)
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        if (this.tableData.length === 1) {
          this.pageform.page = this.pageform.page - 1
        }
        const data = await remove(row)
        this.GetquestionsList(this.pageform)
        console.log(data)
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 上架下架
    async Choice (row) {
      // console.log(row.publishState)
      this.$confirm('是否下架这个题目?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        try {
          row.publishState = row.publishState === 1 ? 0 : 1
          console.log(row.publishState)
          await choicePublish(row)
          this.GetquestionsList(this.pageform)
        } catch (error) {

        }
        this.$message({
          type: 'success',
          message: '下架成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消下架'
        })
      })
    },
    // 跳转到编辑页
    Edit (row) {
      this.$router.push({ path: '/questions/new', query: { id: row.id } })
    }
  }
}
</script>

<style scoped lang='scss'>
  .container{
    box-sizing: border-box;
    padding: 20px 10px;
    margin: 10px;
    background: #fff;
    // height: 100vh;
  }
  .total{
    background-color: #f4f4f5;
    color: #909399;
    width: 100%;
    height: 35px;
    line-height: 35px;
    padding: 8px 16px;
    font-size: 13px;
    line-height: 20px;
    margin: 0;
    box-sizing: border-box;
    border-radius: 4px;
    .el-icon-info{
      font-size: 16px;
      width: 16px;
      margin-right: 10px;
    }
  }
</style>
